<template>
  <div class="app-container">
    <el-form ref="dataForm" :model="dataForm" :rules="dataFormRules" label-width="100px">
      <el-form-item
        v-for="formField in formFields"
        :key="formField.prop"
        :label="formField.label"
        :prop="formField.prop"
      >
        <!-- 单选框 -->
        <el-radio-group v-if="formField.type===1" v-model="dataForm[formField.prop]">
          <el-radio v-for="(item, index) in formField.dataSource" :key="index" :label="item.value">
            {{ item.text }}
          </el-radio>
        </el-radio-group>
        <!--头像-->
        <div v-else-if="formField.type===2">
          <Upload v-model="dataForm[formField.prop]"  />
        </div>
        <!--下拉-->
        <el-select
          v-else-if="formField.type===3"
          v-model="dataForm[formField.prop]"
          placeholder="请选择角色"
          size="mini"
        >
          <el-option
            v-for="item in formField.options"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          />
        </el-select>
        <!-- 默认显示普通文本框 -->
        <el-input
          v-else
          v-model="dataForm[formField.prop]"
          size="mini"
          :placeholder="`请输入${formField.label}`"
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="多图上传">
        <upload-more
          v-model="dataForm.images"
          :file-list="fileList"
          :limit="5"
        />
      </el-form-item>
      <el-form-item label="验证码">
        <div class="code-wrapper">
          <el-input
            v-model="dataForm['code']"
            size="mini"
            placeholder="请输入验证码"
            auto-complete="off"
          />
          <get-code
            :phone="'15296708547'"
          />
        </div>
      </el-form-item>
      <el-button :loading="submitLoading" type="primary" @click.native.prevent="handleSubmit">
        提交
      </el-button>
    </el-form>
  </div>
</template>
<script>
import Upload from '@/components/Upload'
import UploadMore from '@/components/UploadMore'
import getCode from '@/components/getCode'

export default {
  components: { Upload, UploadMore, getCode },
  data() {
    return {
      //  回显多图的数据格式
      submitLoading: false,
      fileList: '/upload/2020-10-19/2020-10-193784.png',
      dataForm: {
        url: null,
        sex: 1,
        rolesIds: null,
        images: '/upload/2020-10-19/2020-10-193784.png',
        code: null
      },
      dataFormRules: {
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        url: [{ required: true, message: '请上传用户头像', trigger: 'change' }],
        rolesIds: [{ required: true, message: '请选择用户角色', trigger: 'change' }]
      },
      formFields: [
        { prop: 'sex', label: '单选框', minWidth: 60, type: 1, dataSource: [{ 'value': 0, 'text': '女' }, { 'value': 1, 'text': '男' }] },
        { prop: 'email', label: '输入框' },
        { prop: 'url', label: '单图上传', imgFlag: true, type: 2 },
        { prop: 'rolesIds', label: '下拉框', type: 3,
          options: [
            {
              value: '1',
              text: '角色一'
            },
            {
              value: '2',
              text: '角色二'
            }
          ] }
      ]
    }
  },
  watch: {
    // 监听url值
    'dataForm.images'(value) {
      console.log(value)
    }
  },
  methods: {
    // 表单提交
    handleSubmit() {
      this.$refs['dataForm'].validate(async(valid) => {
        if (!valid) {
          return false
        }
        console.log(this.fileList)
        this.submitLoading = true
        console.log(this.dataForm)
        setTimeout(() => {
          this.submitLoading = false
        }, 3000)
      })
    }
  }
}

</script>
<style lang="scss" scoped>
  /*@import "../../styles/flex";*/
  /*.el-form{*/
  /*}*/
  .el-form{
    width: 50%;
  }
  .code-wrapper{

  }
</style>
